/**
* Created by ren on 2017/1/3.
*/
<template>
  <div class='personMain page-wrap'>
    <Nav :cut="'person'"></Nav>
    <div class="container">
      <div class="personmain page">
        <ul>
          <li style="text-align: center"><img src="./assets/logo4.png"></li>
          <li :class="{active:cutName==='asset'}" @click="cut('asset')"><img
            :src="cutName==='asset'?require('./assets/item1-1.png'):require('./assets/item1.png')"><span>我的资产</span>
          </li>
          <li :class="{active:cutName==='loose'}" @click="cut('loose')"><img
            :src="cutName==='loose'?require('./assets/item2-1.png'):require('./assets/item2.png')"><span>零钱包</span>
          </li>
          <li :class="{active:cutName==='myGold'}" @click="cut('myGold')"><img
            :src="cutName==='myGold'?require('./assets/item3-1.png'):require('./assets/item3.png')"><span>我的金蛋</span>
          </li>
        </ul>
        <div class="main-wrap">
          <div class="tit" v-html="titHtml"></div>
          <div class="main-con" style="min-height: 340px;">
            <router-view :_parentThis="this"></router-view>
          </div>
        </div>
      </div>
      <div class="jinShengJin" style="border-top: 10px solid #E9E9E9;"
           v-if="cutName==='asset'&&jinshengjinData.length!==0">
        <div class="jsj-list">
          <ul>
            <li class="item">
              <div class="l1">
                <ul>
                  <li>{{jinshengjinData.kinsonName}}</li>
                  <li>年化收益率</li>
                  <li class="num">{{(jinshengjinData.yield*100).toFixed(2)}}<span>%</span></li>
                </ul>
              </div>
              <div class="line"><img src="./assets/line3.png" alt=""></div>
              <div class="l2">
                <ul>
                  <li>期限</li>
                  <li class="num">
                    {{jinshengjinData.validity}}
                    <span v-if="jinshengjinData.unit==='day'">天</span>
                    <span v-if="jinshengjinData.unit==='month'">月</span>
                    <span v-if="jinshengjinData.unit==='year'">年</span>
                    <span v-if="jinshengjinData.unit==='week'">周</span>
                  </li>
                </ul>
              </div>
              <div class="line"><img src="./assets/line3.png" alt=""></div>
              <div class="l3">
                <router-link :to="{name:'jSJDetail',params: {jsjId: jinshengjinData.id}}">
                  <button class="btn">买金</button>
                </router-link>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Nav from './components/Nav'
  import ECharts from 'vue-echarts/dist/vue-echarts'
  export default {
    name: 'personMain',
    components: {
      Nav,
      'chart': ECharts
    },
    data: function () {
      return {
        cutName: 'asset',
        jinshengjinData: [],
        notifyStatus: 2,
        titHtml: '<span>我的资产</span>',
        childName: 'parent',
        goldChild: 'parent',
        looseChild: 'parent'
      }
    },
    methods: {
      cut: function (name) {
        this.cutName = name
        switch (name) {
          case 'asset':
            this.titHtml = '<span>我的资产</span>'
            this.$router.push({name: 'asset'})
            break
          case 'loose':
            this.titHtml = '<span>零钱包</span>'
            this.looseChild = 'parent'
            this.$router.push({name: 'loose'})
            break
          case 'myGold':
            this.titHtml = '<span>我的金蛋</span>'
            this.goldChild = 'parent'
            this.$router.push({name: 'myGold'})
            break
        }
      }
    },
    mounted: function () {
      if (!this.$cookie.get('id')) {
        this.$router.push({'name': 'login'})
        return
      }
    }
  }
</script>
<style>
  @import "./scss/home.scss";
</style>

